import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const longMessage =
    '这是一段较长的聊天消息，用于展示 ChatBubble 的自动换行与最大宽度控制。支持文本与 children，自定义样式与底部附加信息。';

const ChatBubbleTestScreen: React.FC = () => {
    const colors = useThemeColors();
    const styles = StyleSheet.create({
        section: { marginBottom: 20 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        row: { flexDirection: 'column', gap: 12 },
        horizontal: { flexDirection: 'row', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' },
        bordered: { borderWidth: 1, borderColor: colors.border, padding: 8, borderRadius: 8 },
        avatar: { width: 32, height: 32, borderRadius: 16 },
    });

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'ChatBubble 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="ChatBubbleTestScreen"
        >
            {/* 基础：text 与 children */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text="你好，这是基础文本气泡。"
                            align="left"
                            rightFooterText="10:21"
                            testID="chatbubble-basic-text-left"
                        />
                        <UI.ChatBubble
                            align="right"
                            rightFooterText="10:22"
                            testID="chatbubble-basic-children-right"
                        >
                            <View>
                                <UI.Text variant="body1" color="text">这是 children 作为内容的气泡。</UI.Text>
                                <UI.Text variant="caption" color="textSecondary">可组合任意节点。</UI.Text>
                            </View>
                        </UI.ChatBubble>
                    </View>
                </Layout.Card>
            </View>

            {/* 对齐与头像：showAvatar + avatarUri/avatarNode */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>对齐与头像</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text="左侧气泡，展示头像（默认头像在左）。"
                            align="left"
                            showAvatar
                            avatarNode={<UI.Avatar src="https://i.pravatar.cc/64?img=1" size="small" shape="circle" />}
                            rightFooterText="10:35"
                            testID="chatbubble-align-left-avatar-uri"
                        />
                        <UI.ChatBubble
                            text="右侧气泡，使用自定义头像节点。"
                            align="right"
                            showAvatar
                            avatarNode={<UI.Avatar src="https://i.pravatar.cc/64?img=2" size="small" shape="circle" />}
                            rightFooterText="10:36"
                            testID="chatbubble-align-right-avatar-node"
                        />
                        <UI.ChatBubble
                            text="不展示头像的左侧消息。"
                            align="left"
                            showAvatar={false}
                            rightFooterText="10:37"
                            testID="chatbubble-align-left-no-avatar"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 气泡宽度控制：maxBubbleWidth（百分比/数值） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>最大宽度</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text={longMessage}
                            align="left"
                            maxBubbleWidth="60%"
                            rightFooterText="10:40"
                            testID="chatbubble-maxwidth-60-percent"
                        />
                        <UI.ChatBubble
                            text={longMessage}
                            align="right"
                            maxBubbleWidth={260}
                            rightFooterText="10:41"
                            testID="chatbubble-maxwidth-260-px"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 底部内容：footerPlacement inside/outside + footerTextStyle */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>底部内容</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text="底部在外部（默认），右侧文本作为时间戳。"
                            align="left"
                            rightFooterText="外部 · 10:45"
                            footerTextStyle={{ color: colors.textSecondary }}
                            testID="chatbubble-footer-outside"
                        />
                        <UI.ChatBubble
                            text="底部在内部，背景内显示辅助信息。"
                            align="right"
                            rightFooterText={<UI.Text variant="caption" color="onSurface">内部 · 10:46</UI.Text>}
                            footerPlacement="inside"
                            testID="chatbubble-footer-inside"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 头像垂直对齐：top/bottom（多行内容更明显） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>头像垂直对齐</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            align="left"
                            showAvatar
                            avatarNode={<UI.Avatar src="https://i.pravatar.cc/64?img=3" size="small" shape="circle" />}
                            avatarVerticalAlign="top"
                            rightFooterText="10:50"
                            testID="chatbubble-avatar-align-top"
                        >
                            <UI.Text variant="body1" color="text">顶部对齐头像</UI.Text>
                            <UI.Text variant="caption" color="textSecondary">第二行内容用于对比</UI.Text>
                        </UI.ChatBubble>
                        <UI.ChatBubble
                            align="right"
                            showAvatar
                            avatarNode={<UI.Avatar src="https://i.pravatar.cc/64?img=4" size="small" shape="circle" />}
                            avatarVerticalAlign="bottom"
                            rightFooterText="10:51"
                            testID="chatbubble-avatar-align-bottom"
                        >
                            <UI.Text variant="body1" color="text">底部对齐头像</UI.Text>
                            <UI.Text variant="caption" color="textSecondary">第二行内容用于对比</UI.Text>
                        </UI.ChatBubble>
                    </View>
                </Layout.Card>
            </View>

            {/* 圆角与直角：bubbleRadius / squareCornerNearAvatar / squareCorners */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>圆角与直角</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text="自定义半径：bubbleRadius=20"
                            align="left"
                            bubbleRadius={20}
                            rightFooterText="10:55"
                            testID="chatbubble-radius-20"
                        />
                        <UI.ChatBubble
                            text="靠近头像的角改为直角"
                            align="right"
                            showAvatar
                            avatarNode={<UI.Avatar src="https://i.pravatar.cc/64?img=5" size="small" shape="circle" />}
                            squareCornerNearAvatar
                            rightFooterText="10:56"
                            testID="chatbubble-square-corner-near-avatar"
                        />
                        <UI.ChatBubble
                            text="独立控制四角直角（隐藏头像场景尤为有用）"
                            align="left"
                            showAvatar={false}
                            squareCorners={{ topLeft: true, bottomRight: true }}
                            rightFooterText="10:57"
                            testID="chatbubble-square-corners-custom"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 自定义样式：bubbleStyle/textStyle/footerTextStyle + BoxProps（背景/边框/圆角/尺寸） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>样式与盒子属性</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text="自定义 bubble 背景与文本样式"
                            align="left"
                            bubbleStyle={{ backgroundColor: '#E3F2FD' }}
                            textStyle={{ color: '#1976D2' }}
                            rightFooterText="10:59"
                            footerTextStyle={{ color: colors.textSecondary }}
                            testID="chatbubble-styles-bubble-text-footer"
                        />
                        <UI.ChatBubble
                            text="容器 BoxProps：背景/边框/圆角/宽度"
                            align="right"
                            backgroundColor={colors.surface}
                            borderWidth={1}
                            borderColor={colors.border}
                            borderRadius={12}
                            width={'100%'}
                            p={8}
                            rightFooterText="11:00"
                            testID="chatbubble-boxprops-container"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 动作：leftActions 支持 label 对象与 ReactNode */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>动作按钮</UI.Text>
                    <View style={styles.row}>
                        <UI.ChatBubble
                            text="使用 label 对象作为动作（复制/删除）"
                            align="left"
                            leftActions={[
                                { label: '复制', onPress: () => { } },
                                { label: '删除', onPress: () => { } },
                            ]}
                            rightFooterText="11:05"
                            testID="chatbubble-actions-label"
                        />
                        <UI.ChatBubble
                            text="使用 ReactNode 自定义动作区"
                            align="right"
                            leftActions={[
                                <UI.Button key="like" title="点赞" size="small" onPress={() => { }} />,
                                <UI.Button key="reply" title="回复" size="small" onPress={() => { }} />,
                            ]}
                            rightFooterText="11:06"
                            testID="chatbubble-actions-node"
                        />
                    </View>
                </Layout.Card>
            </View>

            {/* 间距：SpacingProps（m/mh/mv/p/ph/pv） */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距能力</UI.Text>
                    <View style={[styles.row, styles.bordered]}>
                        <UI.ChatBubble text="m=8" align="left" m={8} rightFooterText="11:10" testID="chatbubble-spacing-m-8" />
                        <UI.ChatBubble text="mh=12" align="left" mh={12} rightFooterText="11:11" testID="chatbubble-spacing-mh-12" />
                        <UI.ChatBubble text="mv=12" align="left" mv={12} rightFooterText="11:12" testID="chatbubble-spacing-mv-12" />
                        <UI.ChatBubble text="p=8" align="right" p={8} rightFooterText="11:13" testID="chatbubble-spacing-p-8" />
                        <UI.ChatBubble text="ph=16" align="right" ph={16} rightFooterText="11:14" testID="chatbubble-spacing-ph-16" />
                        <UI.ChatBubble text="pv=8" align="right" pv={8} rightFooterText="11:15" testID="chatbubble-spacing-pv-8" />
                    </View>
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default ChatBubbleTestScreen;